<template>
  <!-- 粒子背景 -->
  <vue-particles id="tsparticles" :options="particlesOptions" />
  <!-- 登录验证框 -->
  <div class="loginModel">
    <div class="logo">
      <img src="../../assets/image/logo.png" alt="" />
    </div>
    <a-form
      :model="formState"
      name="basic"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        name="username"
        :rules="[
          { required: true, message: '账号不能为空！' },
          { min: 3, max: 15, message: '账号不能少于3-15位', trigger: 'blur' },
        ]"
      >
        <a-input
          style="color: white"
          class="loginModel_input"
          size="large"
          ref="account"
          placeholder="请输入你的账号!"
          v-model:value="formState.username"
        >
          <template #prefix>
            <UserOutlined />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
        name="password"
        :rules="[{ required: true, message: '密码不能为空！' }]"
      >
        <a-input-password
          class="loginModel_input"
          size="large"
          placeholder="请输入你的密码!"
          v-model:value="formState.password"
          ><template #prefix><LockOutlined /></template
        ></a-input-password>
      </a-form-item>

      <a-form-item name="remember">
        <a-checkbox
          v-model:checked="formState.remember"
          class="rememberCheckbox"
          >{{ $t("login.rem") }}</a-checkbox
        >
      </a-form-item>

      <a-form-item>
        <a-button
          :loading="isLoading"
          type="primary"
          class="btn"
          html-type="submit"
          block
          size="large"
          >{{ $t("login.btn") }}</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup>
// 导入路由
// import { useRouter } from "vue-router";
import { onMounted, ref, reactive } from "vue";
// 粒子背景
import particlesOptions from "../../config/particles";
// 图标组件
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
// 导入工具函数
import { setStrage, getStorage, removeStorage } from "@/utils/localStorage";
//引入API
// import { loginApi } from "@/api/user";
import useUserStore from "@/store/user";
const userStore = useUserStore();
const router = useRouter();
//发送请求loading
const isLoading = ref(false);
//获取账号密码【记住密码】
const info = getStorage("userInfo");
const initInfo = {
  username: "",
  password: "",
  remember: false,
};
//双据绑定表单
const formState = reactive(info ? info : initInfo);
// 自动获取焦点
const account = ref(null);
onMounted(() => {
  account.value.focus();
});
//验证成功后登录
const onFinish = async (values) => {
  // 记住密码功能
  const { username, password, remember } = values;
  remember ? setStrage("userInfo", values) : removeStorage("userInfo");
  isLoading.value = true;
  // 发送请求获取到数据
  userStore
    .getUserToken({ username, password })
    .then((res) => {
      //成功
      //跳转-首页
      message.success("恭喜您，登录成功！");
      router.push({ name: "dashboard" });
      isLoading.value = false;
    })
    .catch((e) => {
      // console.log(e);
      isLoading.value = false;
    });
  // console.log(userStore);
  // if (remember) {
  //   //保存密码-本地存储
  //   setStorage("userInfo", { username, password });
  // }

  // 发送请求
  //方式一 Promise形式
  //loginApi({username, password})
  //.then((res) =>{
  //成功
  //isLoading.value = false;
  //}).catch((e) = >{
  // isLoading.value = false;
  //});
  //方法2：async.....await
  // try {
  //   const res = await loginApi({ username, password });
  //   router.push({ name: "home" });
  // } catch (error) {}
  // isLoading.value = false;
  //3s后成功->跳转
  //setTimeout(() => {
  //success
  //跳转-首页
  //原生js
  //window.location = "#/home";
  //   使用组合api
  //router.push("/home");
  //fail
  // message.warn("账号或密码有误");
  // }, 2000);
};
// 验证失败
const onFinishFailed = () => {
  message.error("验证错误,请处理");
  isLoading.value = false;
  // account.value.focus();
};
</script>
<!-- less预处理 -->
<style lang="less">
/* less ： CSS预处理器 */
.rememberCheckbox {
  color: #fff;
}
.loginModel {
  width: 500px;
  background-color: rgba(0, 0, 0, 0.55);
  position: fixed;
  left: 50%;
  top: 50%;
  color: #fff;
  padding: 20px 40px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  box-shadow: -1px 0px 17px 4px rgba(0, 0, 0, 0.55);
  .logo {
    display: flex;
    justify-content: center;
    img {
      width: 120px;
      margin-bottom: 20px;
    }
  }
}
</style>
